import { Plugin } from 'vite';
import * as resolve from 'resolve';
import * as fs from 'fs';
import { transform } from '@svgr/core';

interface Option {
  defaultExport: 'url' | 'component';
}

/**
 * 将 SVG 转换成组件
 * @param params 导出策略
 * @returns
 */
export default function svgTransform(
  params: Option = { defaultExport: 'url' }
): Plugin {
  return {
    name: 'svgTransform',
    async transform(code, id) {
      // 过滤模块
      if (!id.endsWith('.svg')) {
        return code;
      }
      console.log('处理SVG：', id);

      // 获取 ESbuild，用于编译 JSX
      const path = resolve.sync('esbuild', {
        basedir: require.resolve('vite'),
      });
      const esbuild = require(path);

      // 读取 svg 文件内容
      const svg = await fs.promises.readFile(id, 'utf-8');
      // 将 svg 转换为组件
      const svgComponent = await transform(
        svg,
        {},
        // 设置组件名称
        { componentName: 'ReactComponent' }
      );

      let result = svgComponent;
      if (params.defaultExport === 'url') {
        // code 是模块的导出代码，将其拼接上去
        result += code;
        // 将默认导出处理成命名导出
        result = result.replace(
          'export default ReactComponent',
          'export { ReactComponent }'
        );
      }

      // 解析 jsx 代码为浏览器可运行的代码
      const component = await esbuild.transform(result, {
        loader: 'jsx',
      });

      return {
        code: component.code,
        map: null,
      };
    },
  };
}
